<!--
* @description 
* @fileName need.vue
* @author huangyu
* @date 2023/02/16 18:19:28
!-->
<template>
    <div class="zx-container">
        <el-button type="warning" @click="clickRelease" style="margin-bottom:10px;">我要发布</el-button>
        <el-button type="primary" @click="getData()" style="margin-bottom:10px;">刷新</el-button>
        <el-table :data="needList" border>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column label="类型" width="100">
                <template slot-scope="scope">
                    <div class="color_blue" v-if="scope.row.type==1">需求</div>
                    <div class="color_warning" v-if="scope.row.type==2">福利</div>
                    <div class="color_danger" v-if="scope.row.type==3">官方</div>
                </template>
            </el-table-column>
            <el-table-column label="内容" prop="contant">
                <template slot-scope="scope">
                    <span :class="scope.row.topNumber>0?'color_blue':''">{{scope.row.contant}}</span>
                    <el-tag type="danger" size="mini" v-if="scope.row.topNumber>0">置顶</el-tag>
                    <el-tag type="danger" size="mini" v-if="scope.row.zanNumber>15">热门</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="发布人" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ scope.row.userModel.gameName }}
                    <el-tooltip class="item" effect="dark" v-if="token" :content="scope.row.userModel.qq" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="发布时间" prop="createTimeStr" width="160"></el-table-column>
            <el-table-column label="交互" width="100">
                <template slot-scope="scope">
                    <div class="color_blue" v-if="scope.row.isZan">已赞{{scope.row.zanNumber}}</div>
                    <el-button type="primary" v-else size="mini" plain @click="clickUpdate(scope.row,'zan')">点赞{{scope.row.zanNumber}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="功能操作(管理员)" width="240" v-if="powerGM">
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" plain @click="clickUpdate(scope.row,'top')">置顶{{scope.row.topNumber}}</el-button>
                    <el-button type="warning" v-if="scope.row.topNumber>0" size="mini" plain @click="clickClearTop(scope.row._id)">取消置顶</el-button>
                    <el-button type="danger" size="mini" plain @click="clickUpdate(scope.row,'del')">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="发布内容" :visible.sync="dialogRelease" v-dialogDrag width="610px">
            <el-form style="width:650px;" label-width="100px">
                <el-form-item label="类型：">
                    <el-radio-group v-model="needForm.type">
                        <el-radio :label="1">需求</el-radio>
                        <el-radio :label="2">福利</el-radio>
                        <el-radio :label="3" v-if="powerGM">官方</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="内容：">
                    <el-input v-model="needForm.contant" style="width:450px;" type="textarea" placeholder="发布信息，提供新人玩家福利信息，需求信息。" :rows="4"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitRelease">立即发布</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import { formatDate } from '@/common/unit.js'
import pagination from "@/components/common/pagination.vue";
export default {
  components: {pagination},
  data() {
    return {
        token: this.$store.state.token,
        powerGM: this.$power.roleAction('GM'),

        needList: [],
        dialogRelease: false,

        needForm: {
            contant: "",
            type: 1,
            userId: this.$store.state.token,
            topNumber: 0,
            hotNumber: 0,
            zanNumber: 0,
            status: 1,
        },
        pageindex: 1,
        pagesize: 20,
        total: 0,
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    clickClearTop(_id){
        let params = {
            type: 'getNeed',
            api: 'api-need-update-clear-top',
            token: this.token,
            data: {
                _id: _id,
            },
        }
        get('game', params).then(res => {
            if (res) {
                this.$message.success("操作成功")
                this.getData()
            }
        })
    },
    clickUpdate(row,value){
        if(!this.token){
            this.$message.error("未登录，不能操作！")
            return;
        }
        let params = {
            type: 'getNeed',
            api: 'api-need-update',
            token: this.token,
            data: {
                type: value,
                _id: row._id,
                topNumber: 1,
                zanNumber: 1,
                status: -1,
            },
        }
        get('game', params).then(res => {
            if (res) {
                this.$message.success("操作成功")
                this.needForm.contant = ""
                this.getData()
                
            }
        })
    },
    submitRelease(){
        if(!this.needForm.contant){
            this.$message.error("内容不能为空！")
            return
        }
        let params = {
            type: 'getNeed',
            api: 'api-need-add',
            data: this.needForm,
        }
        get('game', params).then(res => {
            if (res) {
                this.$message.success("发布成功")
                this.needForm.contant = ""
                this.getData()
                this.dialogRelease = false
            }
        })
    },
    clickRelease(){
        if(!this.token){
            this.$message.error("请先登录！")
            return
        }
        this.dialogRelease = true
    },
    getData(){
        let params = {
            type: 'getNeed',
            api: 'api-need-list',
            token: this.token,
            data: {
                pageIndex: this.pageindex,
                pageSize: this.pagesize,
            },
        }
        get('game', params).then(res => {
            if (res) {
                this.needList = res.list
                this.needList.forEach(item=>{
                    item.userModel = item.userList?item.userList[0]:{}
                    item.createTimeStr = formatDate(new Date(item.createTime),'yyyy-MM-dd hh:mm:ss')
                })
                this.total = res.total
            }
        })
    },
    pagechange: function(currentPage) {
         this.pageindex = currentPage;
         this.getData();
      },
  },
};
</script>

<style scoped>
</style>